<template>
    <div class="contact-info">
        <div class="contact-content">
            <!-- 将 contactInfo 改为直接使用 data -->
            <div v-if="data && Object.keys(data).length" class="info-grid">
                <!-- 循环直接使用格式化后的 data -->
                <div class="info-item" v-for="(value, key) in formatContactInfo(data)" :key="key">
                    <div class="con_top">{{ companyName }}</div>
                    <div class="con_bot">
                        <div class="fle">
                            <div class="label">{{ value.name }} </div>
                            <div class="position" v-if="value.position">
                                <i class="el-icon-position"></i>{{ value.position }}
                            </div>
                        </div>
                        <div class="fle" style="gap: 10px;padding-top: 10px;">
                            <div class="label">联系电话： </div>
                            <!-- 修改电话显示部分，增加点击事件 -->
                            <div class="value mobile-value" @click="showMobile(value.id)">{{ value.mobile }}</div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- <div v-else class="no-data">暂无数据</div> -->
        </div>

      <!-- 添加弹窗组件显示完整电话号码 -->
      <el-dialog v-model="mobileDialogVisible" title="联系电话" width="30%" style="margin-top: 15%;" center>

        <div class="mobile-dialog-content">
          <p>完整电话号码：{{ currentMobile }}</p>
        </div>
        <template #footer>
                <span class="dialog-footer">
                    <el-button @click="mobileDialogVisible = false">关闭</el-button>
                </span>
        </template>
      </el-dialog>

    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import baseService from "@/service/baseService";

// 定义联系人信息数据类型（保持不变）
interface ContactInfo {
    name?: string;
    position?: string;
    mobile?: string;
}

// 移除 contactInfo 层级，直接接收数据
const props = defineProps<{
    data?: ContactInfo | string; // 将 prop 名称从 contactInfo 改为 data
    companyName?: string;
}>();

// 添加弹窗相关的响应式数据
const mobileDialogVisible = ref(false);
const currentMobile = ref('');

// 格式化函数参数从 contactInfo 改为 data
const formatContactInfo = (info: ContactInfo | string): Record<string, string> => {
    if (typeof info === 'string') {
        return { '联系方式': info };
    }
    const fieldMap = {
        name: '联系人',
        position: '职位',
        phone: '联系电话',
        email: '邮箱',
    };

    return Object.entries(info || {}).reduce((acc, [key, value]) => {
        const label = fieldMap[key as keyof typeof fieldMap] || key;
        acc[label] = value;
        return acc;
    }, {} as Record<string, string>);
};

// 添加显示完整手机号的函数
const showMobile = (id: number | undefined) => {
  mobileDialogVisible.value = true;

  //获取基本信息
  baseService.get('/noc/companyemployee/info/' + id, {}).then((res) => {
    if (res.code == 0) {
      //刷新
      currentMobile.value = res.data.mobile;
    }
  })
};


</script>

<style scoped lang="less">
// ... existing code ...
::v-deep(.el-dialog__wrapper) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0;

}


.contact-info {
    font-family: "Microsoft YaHei";
    padding-top: 3px;

    .contact-label {
        font-size: 16px;
        color: #333;
        margin-bottom: 15px;
        font-weight: 500;
    }

    .contact-content {
        border-radius: 4px;
        width: 1400px;
        margin: 0 auto;
        padding-bottom: 53px;

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
        }

        .info-grid {
            /* 修改为3列网格布局 */
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            /* 固定3列 */
            gap: 54px 56px;
            /* 调整间距 */

        }

        .info-item {
            width: 431.35px;
            height: 151px;
            border-radius: 5px;
            border: 1px solid rgba(201, 201, 201, 1);
            overflow: hidden;

            .con_top {
                padding-left: 27px;
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                background: rgba(239, 244, 255, 1);
            }

            .con_bot {
                padding: 20px 31px;

            }

            .fle {
                display: flex;
                align-items: center;
                /* 垂直居中对齐 */
                gap: 15px;
                /* 元素间间距 */
            }

            .label {
                color: #606266;
                font-size: 16px;
                font-weight: bold;
            }

            .position {
                color: #303133;
                font-size: 10px;
                color: #fff;
                text-align: center;
                border-radius: 4px;
                background: rgba(42, 130, 228, 1);
                padding-left: 32px;
                padding-right: 10px;
                line-height: 20px;
                word-break: break-word;
                position: relative;
                .el-icon-position {
                    background: url('@/assets/images/imgtou.png') no-repeat #fff;
                    width: 25px;
                    height: 25px;
                    position: absolute;
                    border: 1px solid rgba(42, 130, 228, 1);
                    border-radius: 50%;
                    left: 5px;
                    top: -3px;
                    background-size: 100% 100%;
                }
            }

            .value {
                color: rgba(22, 119, 255, 1);
                font-size: 16px;
                flex: 1;
                word-break: break-word;
            }

            // 添加手机号样式，显示为可点击
            .mobile-value {
              cursor: pointer;
              text-decoration: underline;
            }

        }

        .no-data {
            color: #909399;
            text-align: center;
            padding: 40px 0;
            font-size: 14px;
        }
    }
}
</style>
